<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      canvas {
        border:1px solid #ccc;
      }
    </style>
    <body>
      <canvas id="canvas" width="450" height="360"></canvas>
      <script>
        var canvas = document.getElementById("canvas"),
            r = 10,
            ctx = canvas.getContext("2d"),
            img = new Image();
        
        img.src ="test.jpg"  ;
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
        }
        
        var moveToRight = function() {
 
          ctx.drawImage(img, 0, 0);
          ctx.globalCompositeOperation = "source-over";
          ctx.font = "30px 黑体";
          ctx.textAlign = "center";
          ctx.fillStyle = "#000000";
          ctx.fillText("textAlign=center", r, 200);
          r = r + 10;
        }
        setInterval(moveToRight, 200);
      </script>
    </body>
</html>